<template>
  <div class="op-container">
    <div class="filter-container">
      <!-- <span class="filter-title filter-item">用户通道</span>
      <k-select
        v-model="listQuery.caseProbability"
        style="width:120px"
        class="filter-item first"
        :select-params="[{label:'概率A',value: 1},{label:'概率B',value: 2},{label:'概率C',value: 3}]"
        @handleSelectEvent="handleFilter"
      /> -->
      <span class="filter-title filter-item">AI状态</span>
      <k-select
        v-model="listQuery.robotStatus"
        style="width:120px"
        class="filter-item robot-status"
        :select-params="[{ label: '停用', value: 0 }, { label: '启用', value: 1 }]"
        @handleSelectEvent="handleFilter"
      />
      <!-- <span class="filter-title filter-item">AI执行状态</span>
      <k-select
        v-model="listQuery.robotExeStatus"
        style="width:200px"
        class="filter-item running-status"
        :select-params="[
          {label:'无执行',value: 0},
          {label:'普通开箱中',value: 1},
          {label:'普通开箱中/Roll房中',value: 2},
          {label:'Roll房中',value: 3}
        ]"
        @handleSelectEvent="handleFilter"
      /> -->
      <span class="filter-title filter-item">开箱名称</span>
      <k-select
        v-model="listQuery.caseId"
        style="width:150px"
        class="filter-item openbox-name"
        :custom-params="{ opations: openCaseList, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="handleFilter"
      />

      <k-input v-model.trim="listQuery.key" class="filter-item" is-search placeholder="请输入关键词" :search-fun="handleFilter" @keyup.enter.native="handleFilter" />
    </div>
    <!-- createRobotDialog -->
    <k-button v-if="authorityHandle(20)" class="top-btn" value="创建AI" @click.native="createRobotDialog" />
    <k-button v-if="authorityHandle(20)" class="top-btn" value="删除AI" @click.native="deleteRobot" />

    <div v-if="!authorityHandle(20)" style="margin-top: 40px;" />

    <!--表格相关 -->
    <el-table
      :data="listData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="authorityHandle(20)" type="selection" min-width="50" align="center" />
      <el-table-column min-width="60px" label="头像" align="center">
        <template slot-scope="scope">
          <div class="avatardiv">
            <el-image class="image1" :src="scope.row.userIcon" fit="contain" />
            <!-- 			 		<el-image v-if="scope.row.iconFrame" class="image1 image2" :src="scope.row.iconFrame"
										fit="contain" /> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="用户名" align="center" show-overflow-tooltip />
      <el-table-column prop="nickName" label="昵称" align="center" show-overflow-tooltip />
      <el-table-column v-if="authorityHandle(1)" prop="caseProbabilityName" label="用户通道" align="center" show-overflow-tooltip />
      <el-table-column min-width="200px" label="开箱名称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ getOpenCaseName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="timeIntervalString" min-width="200px" label="开箱间隔" align="center" show-overflow-tooltip />
      <el-table-column prop="timePeriod" min-width="200px" label="开箱时间段" align="center" show-overflow-tooltip />
      <el-table-column prop="robotStatusName" label="AI状态" align="center" show-overflow-tooltip />
      <el-table-column min-width="120px" label="IP限制" align="center">
        <template slot-scope="{row}">
          <div class="finger-container">
            <span>{{ row.isImpose ? '是' : '否' }}</span>
            <p class="finger-delete" @click="relieveIS(row)">{{ row.isImpose ? '解除' : '' }}</p>
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="fissionName" min-width="120px" label="备注" align="center" show-overflow-tooltip /> -->
      <el-table-column min-width="210px" label="备注" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.fissionId" :disabled="!authorityHandle(20)" placeholder="请选择" @change="changeShowState(scope.row)">
            <el-option v-for="item in allAnchor" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column v-if="authorityHandle(20)" fixed="right" min-width="260px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/详情" @click.native="robotUpdateDialog(scope.row)" />
            <k-button class="table-btn" :value="scope.row.robotStatus === 0 ? '启用' : '停用'" @click.native="updateStatus(scope.row)" />
            <k-button class="table-btn" value="开箱定制" @click.native="customSetting(scope.row)" />
          </div>
        </template>
      </el-table-column>

      <el-table-column v-else width="1px" label="" align="center" style="opacity: 0;">
        <template>
          <div class="op-div" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalRows > 0" :total="totalRows" :page.sync="listQuery.pager.pageNo" :limit.sync="listQuery.pager.pageSize" @pagination="loadData" />
    <!-- 创建AI 弹窗 -->
    <k-dialog
      :show-hide.sync="createRobot.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      :show-foot="false"
      :two-btn="true"
      :close-fun="closeFun"
      @click="createRobotFun"
    >
      <el-form :model="robotinfo" label-width="auto" class="form-modify">
        <div class="modify-left">
          <el-form-item label="用户名："><el-input v-model="robotinfo.mobile" placeholder="请输入用户名" /></el-form-item>
          <el-form-item label="头像：">
            <k-upload-file ref="upload1" v-model="robotinfo.userIcon" class="avatar_robot" upload-style="img" @successUpload="successUpload" />
            <span style="color: #b2b2b2;font-size:10sp">jpg/png，且不超过2M</span>
          </el-form-item>
          <el-form-item label="密码："><el-input v-model="robotinfo.password" show-password placeholder="请输入密码" /></el-form-item>
          <el-form-item label="昵称："><el-input v-model="robotinfo.nickName" placeholder="请输入昵称" /></el-form-item>
        </div>
        <div class="modify-right">
          <el-form-item label="用户通道：" style="display:none">
            <el-select v-model="robotinfo.caseProbability" placeholder="请选择概率">
              <el-option v-for="item in dict.type.USER_CHANNEL" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
          </el-form-item>
          <el-form-item label="执行时间段：">
            <el-input v-model="robotinfo.robotTimeStart" onkeyup="value=value.replace(/[^0-9.]/g,'')" class="price-input" />
            <i style="margin: 0 3px;">—</i>
            <el-input v-model="robotinfo.robotTimeEnd" onkeyup="value=value.replace(/[^0-9.]/g,'')" class="price-input" />
            <span style="margin: 0 3px;">时</span>
          </el-form-item>
          <el-form-item label="开箱间隔：">
            <el-input v-model="robotinfo.minute" onkeyup="value=value.replace(/[^0-9.]/g,'')" class="price-input" />
            <span style="margin: 0 3px;">分</span>
            <el-input v-model="robotinfo.second" onkeyup="value=value.replace(/[^0-9.]/g,'')" class="price-input" />
            <span style="margin: 0 3px;">秒</span>
          </el-form-item>
          <el-form-item label="开箱名称：">
            <el-select v-model="boxNameValue" placeholder="请选择箱子" @change="boxSelectChange">
              <el-option v-for="item in openCaseList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
          </el-form-item>
          <ul class="ul-contanier">
            <li v-for="boxItem in robotinfo.robotCaseList" :key="boxItem.caseId">
              <el-form-item label="箱子名称：">
                <el-input v-model="boxItem.caseName" disabled style="width:100px" />
                <el-input v-show="false" v-model="boxItem.caseId" />
              </el-form-item>
              <el-form-item label="箱子方式：">
                <el-select v-model="boxItem.caseNum" style="width:100px" placeholder="请选择" @change="boxOpenSelectChange($event, boxItem.caseId)">
                  <el-option v-for="item in openWayList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
                </el-select>
              </el-form-item>
              <i class="el-icon-remove" @click="removeOpenCaseList(boxItem.caseId)" />
            </li>
          </ul>
        </div>
      </el-form>
    </k-dialog>
    <!-- 开箱定制 弹窗 -->
    <k-dialog
      :show-hide.sync="customSettingDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="setting_dialog"
      title="开箱定制"
      :two-btn="true"
      @click="saveSettingDialog"
    >
      <div class="dialog-warningSetting">
        <ul>
          <li v-for="(customItem, index) in boxCustomModelList" :key="index">
            <span class="warning-title">箱子名称:</span>
            <el-select v-model="customItem.boxId" filterable placeholder="请选择" @change="boxSelectChangeCustom($event, index, true)">
              <el-option v-for="item in boxResultList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
            <span class="warning-title">定制饰品:</span>
            <el-select v-model="customItem.goodsId" clearable placeholder="请选择">
              <el-option v-for="item in customItem.goodsList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
            </el-select>
            <span class="warning-title">开箱次数:</span>
            <el-input v-model.number="customItem.needCount" class="price-input" />

            <el-switch v-model="customItem.status" style="margin-left:10px" active-color="#3b425d" inactive-color="#E9EBF2" :active-value="1" :inactive-value="2" />
            <i v-show="index != 0" class="el-icon-remove" @click="removeAiItem(customItem.boxId, index)" />
            <i v-show="index === boxCustomModelList.length - 1" class="el-icon-circle-plus" @click="addAiItem(index)" />
          </li>
        </ul>
      </div>
    </k-dialog>

    <!-- 管理账户余额 弹框 -->
    <k-dialog
      :show-hide.sync="accountBalanceShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="管理账户余额"
      :show-foot="false"
      :two-btn="true"
      @click="saveAccountBalance"
    >
      <div class="supervise-container">
        <el-form label-width="auto">
          <el-form-item label="选择变更类型：">
            <el-select v-model="accountValue" placeholder="选择变更类型">
              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="当前账户余额："><el-input v-model="userBalance" readonly /></el-form-item>

          <el-form-item v-if="accountValue == 'increase'" label="请选择增加金额：">
            <el-select v-model="increaseSize" clearable placeholder="请选择增加金额">
              <el-option v-for="(item, index) in increaseData" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <!-- 					<el-form-item v-if="accountValue == 'reduce'" label="请输入减少金额：">
						<el-input v-model="reduceUserBalance" placeholder="请输入减少金额" onkeyup="value=value.replace(/[^0-9.]/g,'')"/>
					</el-form-item> -->

          <el-form-item v-if="accountValue == 'increase'" label="增加后账户余额："><el-input v-model="changeUserBalance" readonly /></el-form-item>

          <el-form-item v-if="accountValue == 'reduce'" label="目标账户余额："><el-input v-model="changeUserBalance" /></el-form-item>
        </el-form>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { getBoxList, getGoodsListByBoxId, getBoxSetting, setBoxSetting, listData, deleteUser, update, save, RelieveBanned, updateIdStatus } from '@/api/user/user'
import { getGeneralBoxList, getOpenWayList, getGradeList } from '@/api/rules/listdata'
import { getAnchors, updateRobotFission, updateBalance } from '@/api/user/user'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  dicts: ['USER_CHANNEL'],
  data() {
    return {
      boxResultList: [],
      boxCustomModelList: [
        {
          boxId: undefined, // 箱子id',
          userId: undefined, // 用户id',
          goodsId: undefined, // 饰品id',
          goodsList: [],
          needCount: undefined, // 需要开箱的次数',
          status: 1 // 开关 1开|2关'
        }
      ],
      dialogStatus: 'create',
      textMap: {
        update: '修改/详情',
        create: '创建AI'
      },
      multipleSelection: [],
      openCaseList: [],
      openWayList: [],
      boxSelectList: [], // 箱子选择集合
      gradeOptions: [],
      listData: [],
      boxNameValue: undefined,
      boxOpenWayValue: undefined,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        roleId: 4, // 用户角色-AI",
        identityBelong: undefined, // 身份所属",
        nickName: undefined, // 昵称",
        userIdStatus: undefined, // 在线状态",
        userStatus: '', // 账号状态",
        startTime: '', // 开始时间",
        endTime: '', // 结束时间",
        anchorId: undefined, // 主播id",
        robotStatus: undefined, // AI状态",
        robotExeStatus: undefined, // AI执行状态",
        caseId: '', // 开箱名称",
        invitationCode: '', // 邀请"
        key: '' // 饰品名称'
      },
      robotinfo: {
        id: undefined,
        roleId: 4,
        userIcon: '',
        mobile: '',
        password: '',
        nickName: '',
        userLevel: undefined,
        accountBalance: '',
        caseProbability: 1,
        robotTimeStart: '',
        robotTimeEnd: '',
        minute: undefined,
        second: undefined,
        robotCaseList: [],
        ammoBalance: '',
        pointBalance: ''
      },
      createRobot: {
        showHide: false
      },
      customSettingDialog: false,
      allAnchor: [],

      /* 余额相关*/
      accountBalanceShow: false,
      rowId: '',
      accountValue: 'increase',
      options: [
        {
          value: 'increase',
          label: '增加余额'
        },
        {
          value: 'reduce',
          label: '减少余额'
        }
      ],
      increaseSize: 10,
      increaseData: [
        {
          value: 10,
          label: 10
        },
        {
          value: 50,
          label: 50
        },
        {
          value: 100,
          label: 100
        },
        {
          value: 535,
          label: 535
        },
        {
          value: 1100,
          label: 1100
        },
        {
          value: 3300,
          label: 3300
        }
      ],
      reduceUserBalance: 0, // 要减少的金额
      userBalance: 0, // 当前余额
      changeUserBalance: 0 // 变更后余额
    }
  },

  watch: {
    accountValue(val) {
      this.increaseSize = ''
      this.reduceUserBalance = ''
      this.changeUserBalance = this.userBalance
    },

    increaseSize(val) {
      if (val) {
        this.changeUserBalance = this.addNum(Number(this.userBalance), Number(val))
      } else {
        this.changeUserBalance = this.userBalance
      }
    },

    reduceUserBalance(val) {
      if (val) {
        this.changeUserBalance = Number(this.userBalance) - Number(val)
      } else {
        this.changeUserBalance = this.userBalance
      }
    }
  },
  created() {
    this.getAnchors()
    this.getGradeList()
    this.getGeneralBoxList()
    this.loadData()
  },
  beforeDestroy() {
    localStorage.setItem('pagination', '1')
  },

  methods: {
    // +
    addNum(...arr) {
      let floatLength = 0
      for (let i = 0; i < arr.length; i++) {
        try {
          const currentLength = arr[i].toString().split('.')[1].length
          if (floatLength < currentLength) {
            floatLength = currentLength
          }
        } catch (e) {
          console.error('e错误:addNum ', e)
        }
      }

      const m = Math.pow(10, floatLength)
      let endNum = 0
      for (let k = 0; k < arr.length; k++) {
        endNum += Number(arr[k]) * m
      }
      return endNum / m
    },

    // -
    cutNum(...arr) {
      let floatLength = 0
      for (let i = 0; i < arr.length; i++) {
        try {
          const currentLength = arr[i].toString().split('.')[1].length
          if (floatLength < currentLength) {
            floatLength = currentLength
          }
        } catch (e) {
          console.error('e错误:cutNum ', e)
        }
      }
      const m = Math.pow(10, floatLength)

      let endNum = 0
      for (let k = 0; k < arr.length; k++) {
        if (k == 0) {
          endNum = Number(arr[k]) * m
        } else {
          endNum = endNum - Number(arr[k]) * m
        }
      }
      return endNum / m
    },

    // 余额变动，弹框
    setUserBalanceShow(row) {
      this.rowId = row.id
      this.userBalance = row.accountBalance
      this.changeUserBalance = row.accountBalance
      this.accountValue == 'increase'
      this.increaseSize = ''
      this.reduceUserBalance = ''
      this.accountBalanceShow = true
    },

    /* 余额变动管理*/
    saveAccountBalance() {
      const data = {
        id: this.rowId
      }
      if (this.accountValue == 'increase') {
        data.accountBalance = this.increaseSize
      } else {
        data.accountBalance = this.cutNum(this.changeUserBalance, this.userBalance)
        if (data.accountBalance > 0) {
          this.$message.error('目标余额不可大于当前余额')
          return
        }
      }
      updateBalance(data).then(res => {
        if (res.data.success) {
          this.$message.success(res.data.msg)
          this.accountBalanceShow = false
          this.loadData()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    /**
		 * 解除
		 */
    async relieveIS({ mobile }) {
      await RelieveBanned(mobile)
      this.$message.success('操作成功')
      this.handlePageFilter()
    },
    getAnchors() {
      getAnchors().then(res => {
        this.allAnchor = res.data.data
        this.allAnchor.unshift({
          lineCheck: false,
          lineId: -1,
          lineName: '无'
        })
      })
    },

    loadData(val) {
      if (val) {
        localStorage.setItem('pagination', val.page)
      }
      listData(this.listQuery).then(res => {
        const data = res.data
        this.totalRows = data.totalRows
        const list = []
        for (let i = 0; i < data.rows.length; i++) {
          if (data.rows[i].fissionId) {
            list.push(data.rows[i])
          } else {
            data.rows[i].fissionId = -1
            list.push(data.rows[i])
          }
        }
        this.listData = list
      })
    },

    changeShowState(row) {
      updateRobotFission({
        id: row.id,
        fissionId: row.fissionId
      }).then(res => {
        this.loadData()
        this.$message.success('操作成功')
      })
    },

    removeOpenCaseList(value) {
      this.$log(value)
      var index = this.robotinfo.robotCaseList.findIndex(function(item) {
        return item.caseId === value
      })
      if (index !== -1) {
        this.robotinfo.robotCaseList.splice(index, 1)
      }
    },
    getOpenCaseName(row) {
      const caseName = row.robotCaseList.map(item => {
        return item.caseName
      })
      return caseName.join()
    },
    // 箱子选择
    boxSelectChange(value) {
      var index = this.robotinfo.robotCaseList.findIndex(function(item) {
        return item.caseId === value
      })
      if (index !== -1) return
      const boxSelected = this.openCaseList.find(function(obj) {
        return obj.lineId === value
      })
      const robotcase = {
        caseName: boxSelected.lineName,
        caseId: boxSelected.lineId,
        type: 2,
        caseNum: undefined
      }
      this.robotinfo.robotCaseList.push(robotcase)
    },
    // 箱子方式
    boxOpenSelectChange(event, value) {
      // const boxOpenWaySelected = this.openWayList.find(function(obj) {
      //   return obj.lineId === event
      // })
      this.$log(this.robotinfo.robotCaseList)
    },
    // 加载用户等级（推广）
    getGradeList() {
      getGradeList().then(res => {
        this.gradeOptions = res.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 修改账号状态
    updateStatus(row) {
      updateIdStatus({
        userId: row.id,
        robotStatus: row.robotStatus === 0 ? 1 : 0
      }).then(res => {
        this.$log(res)
        if (res.data.success) {
          this.handlePageFilter()
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    createRobotFun() {
      if (this.dialogStatus === 'update') {
        update(this.robotinfo).then(res => {
          this.$log(res)
          if (res.data.success) {
            this.handlePageFilter()
            this.$message.success('修改成功')
            this.$resetForm(this.robotinfo)
            this.createRobot.showHide = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        this.$log(this.robotinfo)
        save(this.robotinfo).then(res => {
          if (res.data.success) {
            this.handleFilter()
            this.$message.success('创建成功')
            this.$resetForm(this.robotinfo)
            this.createRobot.showHide = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    closeFun() {
      this.$resetForm(this.robotinfo)
    },
    robotUpdateDialog(row) {
      this.initCaseData()
      this.dialogStatus = 'update'
      this.robotinfo.id = row.id
      this.robotinfo.roleId = 4
      this.robotinfo.mobile = row.mobile
      this.robotinfo.userIcon = row.userIcon
      this.robotinfo.password = row.showPassword
      this.robotinfo.nickName = row.nickName
      this.robotinfo.accountBalance = row.accountBalance
      this.robotinfo.userLevel = row.userLevel
      this.robotinfo.accountBalance = row.accountBalance
      this.robotinfo.caseProbability = row.caseProbability
      this.robotinfo.robotTimeStart = row.robotTimeStart
      this.robotinfo.robotTimeEnd = row.robotTimeEnd
      this.robotinfo.minute = row.minute
      this.robotinfo.second = row.second
      this.robotinfo.ammoBalance = row.ammoBalance
      this.robotinfo.pointBalance = row.pointBalance
      this.robotinfo.robotCaseList = row.robotCaseList
      this.createRobot.showHide = true
    },
    successUpload(data) {
      this.robotinfo.userIcon = data
    },
    deleteRobot() {
      const _vue = this
      if (_vue.multipleSelection.length < 1) {
        this.$message.error('请至少选择一条数据进行删除！')
        return
      }
      const selections = _vue.multipleSelection
      this.$confirm('确定删除AI吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var ids = []
          for (var i = 0; i < selections.length; i++) {
            ids.push(selections[i].id)
          }
          deleteUser({
            ids: ids
          }).then(res => {
            if (res.data.success) {
              this.$message.success('删除成功')
              this.handlePageFilter()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handlePageFilter() {
      this.listQuery.pager.pageNo = Number(localStorage.getItem('pagination')) || 1
      this.loadData()
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    },
    createRobotDialog() {
      this.dialogStatus = 'create'
      this.createRobot.showHide = true
      this.robotinfo.roleId = 4
      this.initCaseData()
    },
    getGeneralBoxList() {
      // 加载普通箱子（AI）
      getGeneralBoxList().then(res => {
        // this.$log(res)
        this.openCaseList = res.data
      })
    },

    initCaseData() {
      // 加载几连开（AI）
      getOpenWayList().then(res => {
        this.$log(res)
        this.openWayList = res.data
      })
    },
    // 箱子选择
    boxSelectChangeCustom(value, index, flag) {
      if (flag) {
        this.boxCustomModelList[index].goodsId = undefined
      }
      getGoodsListByBoxId({
        boxId: value
      }).then(res => {
        this.boxCustomModelList[index].goodsList = res.data
        this.$forceUpdate()
      })
    },

    saveSettingDialog() {
      const is = this.boxCustomModelList.some(item => {
        return item.goodsId === null || item.goodsId === undefined || item.goodsId === ''
      })
      const needCount = this.boxCustomModelList.some(item => {
        return item.needCount === null || item.needCount === undefined
      })
      if (is || needCount) {
        this.$message.error('数据有误')
        return
      }
      this.boxCustomModelList.map(item => {
        item.userId = this.currUserId
      })
      // this.$log(this.boxCustomModelList)
      setBoxSetting(this.boxCustomModelList).then(res => {
        this.$message.success('保存成功')
        this.customSettingDialog = false
      })
    },
    customSetting(row) {
      this.currUserId = row.id
      getBoxSetting({
        userId: this.currUserId
      }).then(res => {
        this.boxCustomModelList = res.data
        this.customSettingDialog = true
      })
      getBoxList().then(res => {
        this.boxResultList = res.data
      })
    },
    removeAiItem(value) {
      const index = this.boxCustomModelList.findIndex(function(item) {
        return item.boxId === value
      })
      if (index !== -1) {
        this.boxCustomModelList.splice(index, 1)
      }
    },
    addAiItem(index) {
      this.boxCustomModelList.push({
        boxId: undefined, // 箱子id',
        userId: undefined, // 用户id',
        goodsId: undefined, // 饰品id',
        needCount: undefined, // 需要开箱的次数',
        status: 1 // 开关 1开|2关'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.op-container {
	margin: 20px;
}

.avatar_robot {
	width: 80px;
	height: 80px;

	::v-deep .avatar-uploader {
		.el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.el-upload:hover {
			border-color: $mainColor;
		}

		&-icon {
			font-size: 28px;
			color: #8c939d;
			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;
		}

		.avatar {
			width: 80px;
			height: 80px;
			display: block;
		}
	}
}

.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;

		&.first {
			margin-right: 20px;
		}
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: $menuText;
	}

	.box-probility {
		margin-right: 20px;
	}

	.robot-status,
	.running-status {
		margin-right: 20px;
	}
}

.top-btn {
	margin: 30px 20px 30px 0px;
	font-size: 14px;
	color: #ffffff;
}

.kSelect .el-select .el-input .el-input__inner {
	width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
	border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
	border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
	float: none;
}

.dialog-openboxsetting {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 80px 80px;
}

.form-modify {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 10px 80px;

	.modify-left {
		width: 350px;
	}

	.modify-right {
		margin-left: 80px;
	}
}

.price-input {
	width: 100px;
}

.table-btn {
	width: 90px;
	height: 35px;
	line-height: 35px;
	padding: 0;
	background: #e7ecf8;
	border: 1px solid $mainColor;
	border-radius: 8px;
	font-size: 14px;
	color: $mainColor;

	&:hover {
		background: $mainColor;
		color: #fff;
	}

	&:focus {
		background-color: #e7ecf8;
	}
}

.dialog-warningSetting {
	::v-deep.el-input {
		width: 150px;
	}

	.price-input {
		width: 110px;
	}

	.el-icon {
		&-circle-plus,
		&-remove {
			font-size: 22px;
			color: #3b425d;
			margin-left: 10px;
		}
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		li {
			margin: 0 0 30px 0px;
			display: flex;
			flex-direction: row;
			align-items: center;

			.warning-title {
				font-size: 16px;
				color: $menuText;
				margin-right: 10px;
				margin-left: 20px;
			}

			i {
				color: #d1d5dd;
			}
		}
	}
}

.ul-contanier {
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
		margin: 0px;
		display: flex;
		flex-direction: row;
		align-items: center;

		.el-icon-remove {
			font-size: 22px;
			margin-bottom: 22px;
			color: #3b425d;
		}
	}
}
.finger-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.content {
		display: inline-block;
		width: 60px;
		height: 50px;
		line-height: 50px;
	}

	.finger-delete {
		width: 40px;
		color: #3b425d;
		font-size: 14px;
		cursor: pointer;
	}
}
</style>
